<template>
  <div class="form">
    <el-form :model="form" :inline="true">
      <el-form-item label="选择导出类型:">
        <el-select v-model="form.productTypeId" clearable style="width: 120px;">
          <!-- <el-option label="全部" :value="0"></el-option> -->
          <el-option :label="item.name" :value="item.id" v-for="item in getProductTypeListSelect" :key="item.key" />
        </el-select>
      </el-form-item>
      <el-form-item label="导出单位:">
        <el-select v-model="form.exportUnitId" clearable style="width: 120px;">
          <el-option :label="item.name" :value="item.id" v-for="item in getExportUnitListBtnList "
            :key="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="筛选时间根据:">
        <el-select v-model="form.selectTimeConditionId" clearable style="width: 120px;">
          <el-option :label="item.name" :value="item.id" v-for="item in getSelectTimeConditionListSelect "
            :key="item.id"></el-option>
        </el-select>
        <el-date-picker v-model="times" type="datetimerange" start-placeholder="开始时间" value-format="x"
          style="width: 200px;" end-placeholder="结束时间" time-format="A hh:mm:ss" />
      </el-form-item>
      <el-form-item label="选择导出模板:">
        <el-select v-model="form.templateId" clearable style="width: 205px;">
          <el-option :label="item.name" :value="item.id" v-for="item in getTemplateExportListSelect" :key="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="createtemplate">生成表格信息</el-button>
        <el-button @click="toTemple">模板管理</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div class="table">
    <el-table :data="tableData" border style="width: 1760px;" max-height="650">
      <el-table-column prop="templateName" label="使用模板" width="180" />
      <el-table-column prop="productTypeName" label="导出类型" width="180" />
      <el-table-column prop="remark" label="生成表格条件" width="680" />
      <el-table-column prop="createTime" label="表格生成时间" />
      <el-table-column prop="createBy" label="创建人" width="280" />
      <el-table-column label="操作" width="140">
        <template #default="scope">
          <el-button link type="primary" size="small" @click.prevent="uploadTemContent(scope.row)">
            下载
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div class="page">
    <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4" :page-sizes="[10, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" />
  </div>
</template>

<script setup>
import { ref, onBeforeMount } from 'vue'
import { useRouter } from 'vue-router'
import { useAlertsStore } from '@/store/index'
import { ElMessage } from 'element-plus'
// , ,,templateInfoDownload
import { getProductTypeList, templateInfoDownload, getExportUnitList, getSelectTimeConditionList, getTemplateExportList, templateInfoList, templateInfoGenerateExcel } from '@/api/index'
const store = useAlertsStore()
const router = useRouter()
const form = ref({
  productTypeId: '',
  templateId: '',
  selectTimeConditionId: '',
  startTime: '',
  endTime: ''
})
const times = ref([])
onBeforeMount(() => {
  getProductTypeListBtn()
  getSelectTimeConditionListBtn()
  getTemplateExportListBtn()
  getList()
  getExportUnitListBtn()
})

const getExportUnitListBtnList = ref([])
const getExportUnitListBtn = () => {
  getExportUnitList().then(res => {
    const { data: { data } } = res
    console.log('datas')
    console.log(data)
    getExportUnitListBtnList.value = data
  })
}
const getProductTypeListSelect = ref([])
const getProductTypeListBtn = () => {
  getProductTypeList().then(res => {
    const { data: { data } } = res
    console.log(data)
    getProductTypeListSelect.value = data
  })
}
const getSelectTimeConditionListSelect = ref([])
const getSelectTimeConditionListBtn = () => {
  getSelectTimeConditionList().then(res => {
    const { data: { data } } = res
    console.log(data)
    getSelectTimeConditionListSelect.value = data
  })
}
const getTemplateExportListSelect = ref([])
const getTemplateExportListBtn = () => {
  getTemplateExportList().then(res => {
    const { data: { data } } = res
    console.log(data)
    getTemplateExportListSelect.value = data
  })
}
const formPage = ref({
  pageSize: 10,
  pageNum: 1
})
const getList = () => {
  templateInfoList(formPage.value).then(res => {
    const { data: { data } } = res
    console.log('data')
    console.log(data)
    total.value = data.total
    tableData.value = data.list
  })
}
const tableData = ref([])
const toTemple = () => {
  router.push('/home/everyView/templeManagement')
  store.routetPath = [{ paths: '/home/everyView/templeManagement', name: '收入统计导出' }]
}
// 分页
const currentPage4 = ref(1)
const pageSize4 = ref(10)
const total = ref(0)
const handleSizeChange = (val) => {
  console.log(`${val} items per page`)
  formPage.value.pageSize = val
  getList()
}
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
  formPage.value.pageNum = val
  getList()
}
const uploadTemContent = (row) => {
  console.log('row.excelUrl')
  console.log(row.excelUrl)
  // window.location.href = `/template/templateInfo/download?excelUrl=${row.excelUrl}`
  templateInfoDownload(row.id).then(res => {

  })
  // const token = localStorage.getItem('system_token')
  // console.log('token')
  // console.log(token)
  window.open(
    `http://47.96.159.1:18889/template/templateInfo/download/${row.id}`
  )
}
const createtemplate = () => {
  if (times.value.length > 0) {
    form.value.startTime = times.value[0]
    form.value.endTime = times.value[1]
  }
  templateInfoGenerateExcel(form.value).then(res => {
    ElMessage.success('操作成功')
    getList()
  })
}
</script>

<style lang='less' scoped></style>
